<template>
    <!-- APP风险分析 -->
    <div class="chart-container" id="home2" style="width: 100%;height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: '',
    data() {
        return {
            chart: null,
        };
    },
    mounted() {
        let that = this;
        setTimeout(function () {
            that.initChart2();
        }, 0)
    },

    methods: {
        /**
         * 初始化图表2
         */
        initChart2() {
            var chartDom = document.getElementById('home2');
            var myChart = echarts.init(chartDom);
            var option;
            const trafficWay = [
                { value: 1015, name: 'WIFI热点信息' },
                { value: 2043, name: '通讯录信息' },
                { value: 3043, name: '位置信息' },
                { value: 4043, name: '短信信息' },
                { value: 5043, name: '基站信息' }
            ];
            let sum = trafficWay.reduce((cur, pre) => {
                return cur + pre.value;
            }, 0);
            let data = [];
            let legendData = [];
            var color = [
                '#00ffff',
                '#409B5C',
                '#006ced',
                '#ffe000',
                '#ffa800',
                '#ff5b00',
                '#ff3000'
            ];
            for (var i = 0; i < trafficWay.length; i++) {
                let name = trafficWay[i].name + '  ' + trafficWay[i].value;
                legendData.push(name);
                data.push(
                    {
                        value: trafficWay[i].value,
                        name: name,
                        itemStyle: {
                            borderWidth: 0,
                            borderRadius: 10,
                            shadowBlur: 10,
                            borderColor: color[i],
                            shadowColor: color[i]
                        }
                    },
                    {
                        value: sum / 100, // 控制每个环形之间的间隙
                        name: '',
                        itemStyle: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            },
                            color: 'rgba(0, 0, 0, 0)',
                            borderColor: 'rgba(0, 0, 0, 0)',
                            borderWidth: 0
                        }
                    }
                );
            }
            let seriesOption = [
                {
                    name: '',
                    type: 'pie',
                    clockwise: false,

                    radius: ['45%', '65%'],
                    center: ['51%', '57%'],
                    emphasis: {
                        scale: false
                    },
                    labelLine: {
                        show: true, 
                        length2: 1, 
                    },
                    label: {
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'bolder',
                            fontSize: 12,

                        },
                        show: true
                    },
                    data: data
                }
            ];
            option = {
                title: {
                    text: '总量',
                    subtext: sum,
                    textStyle: {
                        color: '#19E1E3',
                        fontSize: 25,

                    },
                    subtextStyle: {
                        fontSize: 25,
                        fontWeight: 'bolder',
                        color: '#19E1E3'
                    },
                    x: '42%',
                    y: '44%'
                },
              
                color: color,
                tooltip: {
                    show: false
                },
                legend: {
                    icon: 'rect',
                    itemWidth: 16,
                    itemHeight: 8,
                    show: false,
                    itemStyle: {
                        borderWidth: 3,
                    },
                    orient: 'vertical',
                    data: legendData,
                    right: '10%',
                    top: 'center',
                    align: 'left',
                    textStyle: {
                        color: '#fff',
                        fontWeight: 'bolder',
                        fontSize: 17,
                        padding: [0, 0, 0, 10]
                    },
                    itemGap: 20 
                },

                grid: {
                    top: 10, 
                    // left: '10%',
                    // right: '10%',
                    // bottom: '10%',
                },
                toolbox: {
                    show: true
                },
                series: seriesOption
            };
            option && myChart.setOption(option);

        }
    }
};  
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 100%;
}
</style>